<template>
<a-page-header title="返回前页" subtitle="项目回收站" @click="back"></a-page-header>
   <a-list>
                   <a-list-item v-for="project in projects.projectsArr" :key="project.id">
                    <a-list-item-meta :title=project.name
                                        :description=project.deadline
                    >
                        <!-- <template #avatar>
                        <a-avatar shape="square">
                            <img alt="avatar" :src=project.avatar />
                        </a-avatar>

                        </template> -->

                    </a-list-item-meta>

                    <a-button type="outline" @click="back2projects(project.id)" mini>移出回收站</a-button>
                    <a-button type="outline" status = "danger" @click="deleteProject(project.id)" mini>彻底删除</a-button>


                    </a-list-item>
    </a-list>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
import axios from "axios";
import {removeMyInterceptor} from "@/api/interceptor";
import { reactive } from "vue";
const router = useRouter();

let projects = reactive({
  projectsArr:[
    {
        name:'跑步',
        id:0,
        deadline:"October 13, 2020 11:13:00",
        avatar:'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
    },
    {
        name:'开发网页',
        id:1,
        deadline:"October 14, 2020 11:13:00",
        avatar:'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
    },
    {
        name:'摸鱼',
        id:2,
        deadline:"October 15, 2020 11:13:00",
        avatar:'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
    },
]});

const getProjectsInRecycleBin = () => {
    //todo:获取项目列表，格式参照上述projects
  let teamID = localStorage.getItem('teamID');
  removeMyInterceptor();
  axios({
    method: 'post',           /* 指明请求方式，可以是 get 或 post */
    url: 'project/recycleBin',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
    data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
      teamID:teamID
    })
  }).then(function (response) {
    console.log('请求成功');
    if (response.data.code === 0) {
      console.log('成功获得回收站项目');
      console.log(response);
      projects.projectsArr=response.data.data;
      console.log(projects.projectsArr);
      console.log('成功');
    } else {
      console.log('失败');
    }
  }).catch(function () {
    console.log('请求失败');
  });
}

getProjectsInRecycleBin();

const back2projects = (id:number) => {
    //todo:将项目放回原处
  removeMyInterceptor();
  axios({
    method: 'post',           /* 指明请求方式，可以是 get 或 post */
    url: 'project/restore',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
    data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
      projectID:id
    })
  }).then(function (response) {
    console.log('请求成功');
    if (response.data.code === 0) {
      console.log(response.data.message);
      Message.success('该项目已回归原位！');
    } else {
      console.log('失败');
    }
  }).catch(function () {
    console.log('请求失败');
  });

}

const deleteProject = (id:number) => {
    //todo:将项目彻底删除
  removeMyInterceptor();
  axios({
    method: 'post',           /* 指明请求方式，可以是 get 或 post */
    url: 'project/fullDeleteProject',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
    data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
      projectID:id
    })
  }).then(function (response) {
    console.log('请求成功');
    if (response.data.code === 0) {
      console.log(response.data.message);
      console.log('见鬼,应该是后端返回信息有误');
      Message.success('删除成功！');
    } else {
      console.log('失败');
    }
  }).catch(function () {
    console.log('请求失败');
  });
  console.log('---------?');
}

const back = () => {
    router.go(-1);
}
</script>
